<template>
  <!--导航条-->
  <div>
    <div class="nav">
      <div class="logo">logo</div>
      <div class="zui">
        <ul>
          <li><router-link active-class="active" to="/shouYe">首页</router-link></li>
          <li><router-link active-class="active" to="/changPing">产品</router-link></li>
          <li><a>订单</a></li>
          <li><a>联系我们</a></li>
        </ul>
      </div>

      <div class="dropdown">
        <div class="drop">个人中心</div>
        <div class="dropdown-content">
          <a href="#">个人资料</a>
          <a href="#">实名认证</a>
          <a href="#">退出登录</a>
        </div>
      </div>
    </div>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: "Nav"
}
</script>

<style scoped lang="css">
*{
  margin: 0px;
  padding: 0px;
}

.nav{
  display: flex;
  justify-content: center;
  height: 80px;
  background-color: #fff;
}
.logo{
  height: 80px;
  width: 200px;
}
.zui{
  display: flex;
  text-align: center;
}
li{
  display: inline-block;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
  list-style:none;
  width: 200px;
}
/* 鼠标滑动变效果*/
li:hover{
  border-top:1px solid #ffc107;
}
li:hover a{
  color: #ffc107;
}
li a{
  display: inline-block;
  color: #383838;
  text-decoration:none;
}
/*下拉菜单
*/
.drop {
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  width: 200px;
  text-align: center;
  border: none;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: #ffc107}

.dropdown:hover .dropdown-content {
  display: inline-block;
  z-index: 1;
}

.dropdown:hover .drop {
  border-top: 1px solid  #ffc107;
  color: #ffc107;
}
</style>
